@import './reset';

body{
	background: #F5F8FA;
}
.container{
	width: 100%;
	overflow: hidden;
	padding-bottom: calculateRem(62px);
	.order{
		background: white;
		padding: 0 calculateRem(16px);
		margin-bottom: calculateRem(10px);
		.top-bar{
			position: relative;
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			box-sizing: border-box;
			border-bottom: 1px solid #D8D8D8;
			font-size: calculateRem(16px);
			color: black;
			padding-right: calculateRem(50px);
			@include ell;
			.tag{
				display: inline-block;
				width: calculateRem(48px);
				height: calculateRem(22px);
				line-height: calculateRem(20px);
				box-sizing: border-box;
				text-align: center;
				font-size: calculateRem(12px);
				border-radius: 3px;
				position: absolute;
				right: 0;
				top: calculateRem(14px);
			}
			.unpay{
				color: #FF703A;
				border: 1px solid #FF703A;
			}
			.effect{
				color: #2F9AD8;
				border: 1px solid #2F9AD8;
			}
			.outdeal{
				color: #999;
				border: 1px solid #999;
			}
		}
		.middle{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: calculateRem(16px) 0;
			.m-l{
				width: calculateRem(40px);
				height: calculateRem(40px);
				margin-right: calculateRem(14px);
				>img{
					width: 100%;
					height: 100%;
				}

			}
			.m-r{	
				height: calculateRem(40px);
				max-width: 83%;
				line-height: calculateRem(20px);
				@include mulell(2);
				overflow: hidden;
				font-size: calculateRem(14px);
				color: #4B4B4B;

			}
		}
		.bottom{
			width: 100%;
			height: calculateRem(46px);
			line-height: calculateRem(46px);
			box-sizing: border-box;
			border-top: 1px solid #d8d8d8;
			font-size: calculateRem(15px);
			color: #4B4B4B;
			.b-l{
				width: 70%;
				height: calculateRem(46px);
				float: left;
				@include ell;
			}
			.b-r{
				width: 30%;
				height: calculateRem(46px);
				float: right;
				text-align: right;
				@include ell;
			}
		}
	}

	.lists-wrap{
		width: 100%;
		height: auto;
		background: white;
		padding: 0 calculateRem(16px);
		margin-top: calculateRem(10px);
		box-sizing: border-box;
		.list-bar{
			width: 100%;
			height: calculateRem(40px);
			box-sizing: border-box;
			border-bottom: 1px solid #F5F8FA;
			line-height: calculateRem(40px);
			.l-bar-l{
				width: 26%;
				float: left;
				height: calculateRem(40px);
				font-size: calculateRem(15px);
				color: #4A5359;
			}
			.l-bar-r{
				width: 74%;
				float: right;
				text-align: right;
				height: calculateRem(40px);
				font-size: calculateRem(16px);
				color: #000F19;
				@include ell;

			}
		}
		.auto{
			height: auto;
			min-height: calculateRem(40px);
			&:after{
				display: block;
				content: '';
				clear: both;
			}
			.l-bar-l{
				float: left;
			}
			.l-bar-r{
				height: auto;
				min-height: calculateRem(40px);
				float: right;
				.line1{
					font-size: calculateRem(16px);
					line-height: calculateRem(20px);
					margin-top: calculateRem(8px);
				}
				.line2{
					color: #E62622;
					line-height: calculateRem(20px);
					margin-bottom: calculateRem(8px);
				}
			}
		}
	}

	.receive-way{
		width: 100%;
		height: auto;
		/*background: white;*/
		margin-top: calculateRem(12px);
		box-sizing: border-box;
		/*padding: 0 calculateRem(16px);*/
		.receive-wrap{
			width: 100%;
			height: calculateRem(50px);
			line-height: calculateRem(50px);
			box-sizing: border-box;
			border-bottom: 1px solid #F5F8FA;
			background: white;
			padding: 0 calculateRem(16px);
			box-sizing: border-box;
			.receive-l{
				width: 40%;
				height: calculateRem(50px);
				float: left;
				>span{
					font-size: calculateRem(16px);
					color: #4A5359;
				}
				
			}
			.receive-r{
				width: 60%;
				height: calculateRem(50px);
				line-height: calculateRem(50px);
				float: right;
				text-align: right;
				@include ell;
				>span{
					font-size: calculateRem(16px);
					color: #4B4B4B;
				}


			}

			&:first-child{
				height: calculateRem(30px);
				line-height: calculateRem(30px);
				background: #F5F8FA;
				.receive-l{
					height: calculateRem(30px);
					line-height: calculateRem(30px);
					>span{
						color: #999;
					}
				}
				.receive-r{
					height: calculateRem(30px);
					line-height: calculateRem(30px);
					>span{
						color: #4B4B4B;
						&:after{
							content: '';
							display: inline-block;
							width: calculateRem(8px);
							height: calculateRem(16px);
							vertical-align: -2px;
							background: url('../images/affirm_right_arrow_icon.png') no-repeat;
							background-size: 100% 100%;
							margin-left: calculateRem(6px);
						}

					}
				}
			}
		}
		/*.title-reset{
			height: calculateRem(30px);
			line-height: calculateRem(30px);
			background: #F5F8FA;
		}*/
	}



}
.footer{
	width: 100%;
	height: calculateRem(60px);
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	right: 0;
	background: #F5F8FA;
	.btns-wrap{
		position: absolute;
		height: calculateRem(50px);
		left: calculateRem(10px);
		right: calculateRem(10px);
		bottom: calculateRem(5px);
		>a{
			display: block;
			height: calculateRem(50px);
			font-size: calculateRem(20px);
			color: #FFFFFF;
			text-align: center;
			line-height: calculateRem(50px);
			outline: none;
			border-radius: calculateRem(5px);
			font-weight: bold;
		}
		.outdeal{
			background: #D8E5F5;
			width: 35%;
			color: #666;
			float: left;
			&:active{
				background: #e4ebf3;
			}
		}
		.buy{
			background: #E62622;
			width: 63%;
			float: right;
			color: white;
			&:active{
				background: #C51B0D;
			}
		}
		.resign{
			height: calculateRem(50px);
			border-radius: calculateRem(5px);
			color: white;
			font-size: calculateRem(20px);
			background: #E62622;
			font-weight: bold;
			&:active{
				background: #C51B0D;
			}
		}
	}
}
